<template>
  <div class="page">
    <SelfAdaption width="1920" height="1080" mode="auto-x-y">
      <AutoRow class="max-size" mode="column" style="overflow:hidden;">
        <AutoCol class="header-box">
          <img src="./img/top-title.png" style="width:100%; height:100px;" alt="">
        </AutoCol>
        <AutoCol class="page-content" size="auto">
          <AutoRow class="max-size">
            <AutoCol class="page-left-box">
              <img src="./img/zuo2.png" alt="">
              <EchartComponent @register="fwdxlxEchart.registerEchart" style="position:absolute; left:0; top:40px; width:450px; height:220px;"></EchartComponent>
            </AutoCol>
            <AutoCol class="page-center-box" size="auto">
              <div class="text-center">
                <img src="./img/top-date.png" alt="">
              </div>
              <!-- <div class="map-box" ref="map"> -->
                <div class="map-mark"
                    v-for="(item,i) of markerArr"
                    :key="i"
                    :class="{map_mark_select:item.id == (selectMarker ? selectMarker.id : null)}"
                    :style="`left:${item.x || 0}px; top:${item.y || 0}px;`"
                >
                    <div class="map-mark-title" @click.stop="nextSelectMarker(item)">
                      <div style="background-color:rgba(16, 193, 209, 1); padding:2px 20px;">{{item.name}}</div>
                      <div class="content-wrapper-a">
                        <div class="content-wrapper-b">
                          <div style="background-color:rgba(15, 104, 120, .7); padding:5px 20px;">
                            <p>服务量：{{ item.data1 }}</p>
                            <p style="margin-top:5px;">补贴金额：{{ item.data2 }}</p>
                            <p style="margin-top:5px;">交易金额：{{ item.data3 }}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div :style="`height:${item.height || 186}px`" class="map-mark-icon-1" @click.stop="nextSelectMarker(item)"></div>
                    <div class="map-mark-icon-2" @click.stop="nextSelectMarker(item)"></div>
                </div>
            <!-- </div> -->
            </AutoCol>
            <AutoCol class="page-right-box">
              <img src="./img/you.png" alt="">
            </AutoCol>
          </AutoRow>
        </AutoCol>
      </AutoRow>
    </SelfAdaption>
  </div>
</template>

<script lang="ts" setup>
import {
  $http
} from "@/http"

import {
  computed,
  watch,
  watchEffect,
  watchPostEffect,
  watchSyncEffect,

  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted,

  onBeforeUpdate,
  onUpdated,

  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  onActivated,
  onDeactivated,
  onServerPrefetch,

  ref,
  reactive,
  readonly,
  useSlots,
  useAttrs,
  nextTick
} from "vue"

import {
  timestampToDate,
  fromDefaultData
} from "@/utils"

import {
  useInterval,
  useTimeout
} from "@/use"

import {
  EchartComponent,
  useEchart,
  $echarts,
  tooltip
} from '@/Echarts'

//老人类型
const scatterData = [];
let difFwdxlxEchartData = [
  {name:"困难家庭", value:"1124"},
  {name:"独居空巢", value:"1124"},
  {name:"高龄老人", value:"1124"},
]
const fwdxlxEchart = useEchart({
  tooltip: {
    ...tooltip,
    trigger: 'item'
  },
  color:["rgba(6, 230, 182, 1)", "rgba(41, 177, 254, 1)", "rgba(255, 177, 60, 1)"],
  legend:{
    show: true,
    type: 'scroll',
    icon:"circle",
    orient:"vertical",
    top: "middle",
    left: "47%",
    itemGap: 16,
    itemWidth: 8,
    itemHeight: 8,
    formatter: function(name){
      let data = fwdxlxEchart.getChart().getOption().series[0].data;
      let total = 0;
      data.forEach(item => {
        total += parseInt(item.value);
      })
      let currentValue = data.find(item => item.name === name).value;
      return [
        `{name|${name}}`,
        `{v|${(currentValue || 0).toString().replace(/(?<=^\d*)(\d)(?=(?:\d{3})+(?:[^\d].+)?$)/g, '$1,')}}`,
        `({p|${total == 0 ? 0 : parseFloat((currentValue / total * 100).toFixed(2))}%})`,
      ].join('')
    },
    textStyle: {
      color: "#3F7DE5",
      fontSize: 14,
      rich: {
          name: {
              color: '#fff',
              fontSize:16,
              padding:[5,0,0,5],
              width:90
          },
          p: {
              color: 'rgba(88, 233, 255, 1)',
              fontSize:16,
              padding:[5,0,0,0],
          },
          v: {
              color: 'rgba(88, 233, 255, 1)',
              fontSize:16,
              padding:[5,0,0,0],
          }
      }
    },
  },
  series: [
    {
      name: '老人类型',
      type: 'pie',
      radius: ['50%', '70%'],
      center:["24%","50%"],
      // avoidLabelOverlap: false,
      label: {
        show:false,
        // alignTo: 'labelLine',
        // fontSize:40,
        // color:"rgba(193, 221, 255, 1)",
        // formatter: '{value|{c}({d}%)}\n{label|{b}}',
        // minMargin: 0,
        // edgeDistance: 0,
        // width:10,
        // height:10,
        // borderRadius:5,
        // borderColor:"#ff0",
        // backgroundColor:"#f00",
        // overflow:"none",
        // rich: {
        //   value:{
        //     fontSize: 40,
        //     color: '#B9CEE7',
        //     padding:[20,0,10,0]
        //   },
        //   label: {
        //     width:0,
        //     fontSize: 32,
        //     color: '#B9CEE7',
        //     marginTop:30,
        //     padding:[0,0,20,0]
        //   }
        // }
      },
      data: []
    },
    {
      name: '',
      type: 'pie',
      z:8,
      radius: ['50%', '58%'],
      center:["24%","50%"],
      emptyCircleStyle:{
        color:"rgba(0,0,0,.4)",
      },
      data: []
    },
  ]
}, (data, option) => {
    option.series[0].data = data;
    return option
})
fwdxlxEchart.updata(difFwdxlxEchartData);

const markerArr = reactive([
  {
    x:140,
    y:520,
    name:"幸福在嘉养老服务公司",
    data1:845,
    data2:1251,
    data3:211251,
  },
  {
    x:520,
    y:790,
    name:"颐养伦养老服务公司",
    data1:345,
    data2:2253,
    data3:324233,
  },
  {
    x:880,
    y:470,
    name:"怡居康养服务有限公司",
    data1:565,
    data2:1827,
    data3:32344,
  }
])
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
